<!-- 首页 -->
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import myRouter from '@/router'
import DuiTable from '@/common-ui/dui-table/index.vue'
import type { IDbFormItem, IDbTable } from '@/types/global'

// 表单---start
const formConfig = reactive<IDbFormItem[]>([
  {
    label: '测试选择',
    prop: 'types',
    type: 'select',
    span: 12,
    required: true,
    list: [
      { label: '类型1', value: 1 },
      { label: '类型2', value: 2 }
    ],
    options: {
      multiple: true
    }
  },
  {
    label: '日期',
    prop: 'createTime',
    type: 'date',
    span: 12,
    required: true,
    tip: '不得小于当前时间',
    rules: [
      {
        trigger: 'change',
        validator: (rule: any, value: any, callback: any) => {
          const curTime = new Date().getTime()
          const valTime = new Date(value).getTime()
          if (valTime <= curTime) {
            callback(new Error('日期需要大于当前时间'))
          } else {
            callback()
          }
        }
      }
    ]
  }
])
const formData = reactive({
  types: [] as any[],
  date: ''
})
// 表单---end

// 表格---start
const myTableRef = ref<InstanceType<typeof DuiTable>>()
const tableData = reactive<IDbTable>({
  search: { pageNum: 1, pageSize: 20 },
  data: [] as any[],
  total: 0,
  columns: [
    { type: 'tableSelect', prop: '', width: '60px', multiple: true },
    { label: '序号', type: 'index', prop: '', width: '60px' },
    { label: '设备编号', prop: 'deviceNumber', width: '100px' },
    { label: '图片', prop: 'devImg', width: '150px', type: 'imgs' },
    { label: '设备名称', prop: 'deviceName', width: '100px' },
    { label: '规格型号', prop: 'specification', width: '100px' },
    { label: '负责人', prop: 'responsiblePersonName', width: '100px' },
    { label: '设备状态', prop: 'deviceStatus', width: '100px' },
    { label: '设备类别', prop: 'deviceCategoryName', width: '100px' },
    { label: '使用状态', prop: 'usageStatus', width: '100px' },
    { label: '所属部门', prop: 'departmentName', width: '100px' },
    { label: '设备位置', prop: 'deviceLocationName', width: '100px' },
    { label: '单位', prop: 'unit', width: '100px' },
    { label: '供应商', prop: 'supplierName', width: '100px' },
    { label: '购置日期', prop: 'purchaseDate', width: '100px' },
    { label: '保修期至', prop: 'maintenanceDate', width: '100px' },
    { label: '操作', prop: 'handle', fixed: 'right', width: '100px', type: 'slot' }
  ]
})
// 表格---end

// 人员选择
const userPickList = ref<any[]>([])

getDataList()

/**
 * 获取设备列表
 */
function getDataList() {}
/**
 * 点击详情
 */
function detailClick(row: any) {
  console.log('===', row)
}
/**
 * 获取所选数据
 */
function getSelectClick() {
  console.log('userPickList', userPickList.value)
}
/**
 * 去看子应用
 */
function showChildAppClick() {
  // router.push('/test-child-app')
  myRouter.push('/test-child-app')
}
</script>

<template>
  <div class="home-bg">
    <dui-form class="home-form" :form-config="formConfig" :form-data="formData"></dui-form>
    <div class="home-btn-bar">
      <el-button class="home-btn-bar-item" type="primary" @click="getSelectClick">获取所选数据</el-button>
      <el-button class="home-btn-bar-item" type="primary" @click="showChildAppClick">看子应用</el-button>
      <db-pick-user :pickList="userPickList">
        <el-button class="home-btn-bar-item" type="primary">打开人员选择弹窗</el-button>
      </db-pick-user>
    </div>
    <dui-table ref="myTableRef" class="home-table" v-bind="tableData" @search="getDataList">
      <template #handleSlot="{ row }">
        <el-button type="primary" link @click="detailClick(row)">详情</el-button>
      </template>
    </dui-table>
  </div>
</template>

<style lang="scss" scoped>
.home-bg {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  overflow-y: auto;
  .home-form {
    height: 50px;
  }
  .home-btn-bar {
    height: 50px;
    display: flex;
    align-items: center;
    .home-btn-bar-item {
      margin-right: 10px;
    }
  }
  .home-table {
    height: calc(100% - 100px);
  }
}
</style>
